<template>
    <el-card>
        <!-- 标题内容 -->
        <div class="box">
            <div class="short"></div>
            <div>机构管理</div>
        </div>

        <!-- 搜索栏 -->
        <div class="select-container">
            <div class="input-box">
                <el-input type="text" placeholder="请输入关键字" v-model="keyword" clearable @keyup.enter="Search()" />
                <img @click="Search()" src="../../../assets/teamManage/u1347.png">
            </div>

            <!-- 新增按钮 -->
            <div class="btn-box">
                <el-button size="large" v-permission="'新增机构'"
                    @click="$router.push('/data/organization/add')">新增机构</el-button>
                <el-button size="large">导出</el-button>
            </div>
        </div>

        <!-- 表格信息 -->
        <el-table :data="AgencyData.rows" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" style="margin-top: 30px;">
            <el-table-column type="selection" width="55" />
            <el-table-column label="编号" prop="_id" show-overflow-tooltip />
            <el-table-column label="机构图片">
                <template #default="{ row }">
                    <el-image :src="row.image" style="width: 50px; height: 50px;"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="机构名称" prop="name" show-overflow-tooltip />
            <el-table-column label="负责人姓名" prop="contacts" />

            <el-table-column label="电话" prop="phone" />
            <el-table-column label="机构地址" prop="address" show-overflow-tooltip />
            <el-table-column label="状态">
                <template #default="{ row }">
                    <el-switch v-model="row.state" active-text="启用" inactive-text="禁用" :active-value="1"
                        :inactive-value="0" inline-prompt
                        style="--el-switch-on-color:#13ec66; --el-switch-off-color: #ccc"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="240">
                <template #default="{ row }">
                    <div class="action-buttons">
                        <el-button type="primary" v-permission="'编辑机构'" link @click="$router.push({
                            path: '/data/organization/add',
                            query: { _id: row._id },
                        })">编辑</el-button>

                        <el-button type="danger" link @click="deleteAgency(row._id)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="flex-end" v-model:current-page="pageData.currentPage"
            v-model:page-size="pageData.pageSize" :page-sizes="[10, 20, 50, 100]" :background="true"
            layout="total, sizes, prev, pager, next, jumper" :total="AgencyData.total" />
    </el-card>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { useFindData } from '../../../composables/findData';
import { deleteAgencyApi } from '../../../api/agency';


const { AgencyData, findAgencyAsync } = useFindData();
//搜索条件
const keyword = ref('');

//查询方法
function Search() {
    findAgency()
}
//分页数据
const pageData = ref({
    currentPage: 1,
    pageSize: 5
})

//侦听分页数据
watch(pageData, () => {
    findAgency()
}, { deep: true })

//查询机构方法
function findAgency() {
    findAgencyAsync({
        ...pageData.value,
        value: keyword.value,
    })
}
//删除机构
function deleteAgency(id) {
    ElMessageBox.confirm(
        '该操作不可撤销，确认删除吗？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        // 调用删除API并传递医生ID
        return deleteAgencyApi({ _id: id })
    })
        .then(res => {
            if (res.code === 200) {
                ElMessage.success('删除成功！')
                // 重新加载数据
                findAgency()
            } else {
                throw new Error('删除失败')
            }
        })
        .catch(err => {
            if (err.name !== 'Cancel') { // 排除用户取消的情况
                console.error('删除失败：', err)
                ElMessage.error('删除失败，请重试')
            }
        })
}

onMounted(() => {
    findAgency()

})

</script>

<style scoped lang="scss">
.el-card {
    min-height: 100vh;
}

.box {
    display: flex;
    align-items: center;

    div {
        font-size: 18px;
    }
}

.short {
    width: 6px;
    height: 20px;
    background-color: var(--el-color-primary);
    border-radius: 8px;
    margin-right: 10px;
}

.select-container {
    position: relative;

    .input-box {
        width: 350px;
        height: 38px;
        border: 1px #ddd solid;
        border-radius: 4px;
        margin-left: 15px;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        input {
            border: none;
            margin-left: 20px;

            &::-webkit-input-placeholder {
                /* Chrome/Safari */
                color: #999999;
                font-size: 14px;
            }
        }

        img {
            margin-right: 10px;
        }
    }

    .btn-box {
        position: absolute;
        top: 0;
        right: 0;


        .el-button {
            background-color: var(--el-color-primary);
            color: #fff;
        }
    }
}

.el-input {
    --el-input-border-color: #ffffff;
    --el-input-hover-border-color: #ffffff;
    --el-input-focus-border-color: #ffffff
}
</style>